<template>
  <div id="app">
    <el-container class="is-vertical fullheight">
      <Navigator v-if="!isMobile" />
      <el-container
        class="main_container"
        :class="{ main_container__component: isComponent }"
      >
        <Menu v-if="!isMobile && isComponent" />
        <el-scrollbar class="page-component__scroll">
          <div v-if="isComponent" class="page-container page-component">
            <div class="page-component__content">
              <router-view />
            </div>
            <el-backtop
              v-if="showBackToTop"
              target=".page-component__scroll .el-scrollbar__wrap"
              :right="100"
              :bottom="150"
            ></el-backtop>
          </div>
          <router-view v-else />
        </el-scrollbar>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import Navigator from '$exp/views/Navigator.vue'
  import Menu from '$exp/views/Menu.vue'
  import mobileMode from '@/mixins/mobileMode.js'

  export default {
    name: 'App',
    components: { Navigator, Menu },
    mixins: [mobileMode],
    computed: {
      showBackToTop() {
        return !this.$route.path.match(/backtop/)
      },
      isComponent() {
        return (
          this.$route.path.match(/component/) || this.$route.path.match(/guide/)
        )
      },
    },
    mounted() {
      // 因为resize事件在整个项目中只能监听一次，所以这里通过全局广播发送这个事件
      window.onresize = () => {
        this.$root.$emit('resize')
      }
    },
  }
</script>
<style lang="scss">
  .main_container {
    overflow: hidden;
    margin: 0 0 0 auto;
    width: 100%;

    &.main_container__component {
      width: 95%;
    }
  }

  .page-component__scroll {
    width: 100%;
    height: calc(100% - 60px);
    margin-top: 60px;

    > .el-scrollbar__wrap {
      overflow-x: auto;
    }
  }

  .page-component {
    box-sizing: border-box;
    height: 100%;

    &.page-container {
      padding: 0;
      width: 95%;
      margin: 0 auto 0 0;
    }

    .page-component__nav {
      width: 240px;
      position: fixed;
      top: 0;
      bottom: 0;
      margin-top: 80px;
      transition: padding-top 0.3s;

      > .el-scrollbar__wrap {
        height: 100%;
        overflow-x: auto;
      }

      &.is-extended {
        padding-top: 0;
      }
    }

    .side-nav {
      height: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
      padding-right: 0;

      & > ul {
        padding-bottom: 50px;
      }
    }

    .page-component__content {
      padding-left: 20px;
      padding-bottom: 100px;
      box-sizing: border-box;
    }

    .content {
      padding-top: 50px;

      > {
        h3 {
          margin: 55px 0 20px;
        }

        table {
          border-collapse: collapse;
          width: 100%;
          background-color: #fff;
          font-size: 14px;
          margin-bottom: 45px;
          line-height: 1.5em;

          strong {
            font-weight: normal;
          }

          td,
          th {
            border-bottom: 1px solid #dcdfe6;
            padding: 15px;
            max-width: 250px;
          }

          th {
            text-align: left;
            white-space: nowrap;
            color: #909399;
            font-weight: normal;
          }

          td {
            color: #606266;
          }

          th:first-child,
          td:first-child {
            padding-left: 10px;
          }
        }

        ul:not(.timeline) {
          margin: 10px 0;
          padding: 0 0 0 20px;
          font-size: 14px;
          color: #5e6d82;
          line-height: 2em;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .page-component {
      .page-component__nav {
        width: 100%;
        position: static;
        margin-top: 0;
      }
      .side-nav {
        padding-top: 0;
        padding-left: 50px;
      }
      .page-component__content {
        padding-left: 10px;
        padding-right: 10px;
      }
      .content {
        padding-top: 0;
      }
      .content > table {
        overflow: auto;
        display: block;
      }
    }
  }
</style>
